<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-01 18:23:22
 * @LastEditors: Andy
 * @LastEditTime: 2023-04-06 11:42:58
-->
<template>
  <!-- 子页面面板 -->
  <x-sub-page class="role-auth" :content="'角色授权'" @goBack="handleBack" :isFixBtn="true">
    <el-alert :title="title" type="info" show-icon style="margin-bottom: 10px"> </el-alert>
    <div class="auth-roles-container">
      <role-auth-info ref="roleAuthComponents" :role-info="params" />
    </div>
    <fixed-btn-area>
      <el-button @click="handleCancel"> {{ $t('common.cancel') }} </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading"> {{ $t('common.confirm') }} </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>
<script>
  import { throttle } from '@package/utils'
  import { apiPostRoleMenus, apiPostRoleScope, apiGetRoleInfo } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum'

  export default {
    name: 'RoleAuth',
    inject: ['closePages'],
    data() {
      return {
        loading: false,
        // dataScope: [],
        // functionType: '0',
        // functionScope: [],
        // params: {
        //   dsType: '0',
        //   upmsRoleMenuVos: [],
        //   upmsRoleScopeVos: [],
        //   orgId: '0'
        // }
        params: null,
        title:
          '说明：每种角色对应的功能权限是按端保存的,且该角色只支持配置其中一端的功能权限。当您点击下方"确认"按钮时,请您注意,您保存的是当前端Tab页的功能权限,如果之前保存过其他端的功能权限,其他端的功能权限将被覆盖'
        // activeName:'first'
      }
    },
    computed: {
      menuIds() {
        return this.params?.menus ?? []
      },
      dataKeys() {
        return this.params?.scopes ?? []
      }
    },
    async mounted() {
      // 这边回填菜单权限和数据权限数据
      const params = this.$route.query
      await this.getAuthInfo(params.id)
    },
    methods: {
      handleCancel() {
        this.$confirm('您确定要放弃操作返回吗', '提示', {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        })
          .then(() => {
            this.handleBack()
          })
          .catch(() => {})
      },
      async getAuthInfo(id) {
        const { data } = await apiGetRoleInfo(id)
        this.params = data
        this.params.dsType += ''
      },
      handleSubmit: throttle(function () {
        this.loading = true
        const result = this.$refs.roleAuthComponents.dataKeys
        const scopeResult = this.$refs.roleAuthComponents.functionKeys
        const dsType = this.$refs.roleAuthComponents.selectVal
        if (this.$refs.roleAuthComponents.activeName === 'first') {
          const clicentName = this.$refs.roleAuthComponents.checkName
          this.$confirm(`是否确认提交?`, '提示', {
            confirmButtonText: this.$t('common.confirm'),
            cancelButtonText: this.$t('common.cancel'),
            type: 'warning'
          })
            .then(() => {
              apiPostRoleMenus({ roleId: this.params.id, menuIds: scopeResult }).then(
                ({ code, msg }) => {
                  this.loading = false
                  if (code === EnumApiCode.Success) {
                    this.$message.success(this.$t('auth.role.successTips'))
                  } else {
                    this.$message.error(msg)
                  }
                },
                () => {
                  this.loading = false
                }
              )
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          apiPostRoleScope({ roleId: this.params.id, dsType, deptIds: result }).then(
            ({ code, msg }) => {
              this.loading = false
              if (code === EnumApiCode.Success) {
                this.$message.success(this.$t('auth.role.successTips'))
                this.getAuthInfo(this.params.id)
              } else {
                this.$message.error(msg)
              }
            },
            () => {
              this.loading = false
            }
          )
        }
        // if (JSON.stringify(result) !== JSON.stringify(this.dataScope) && dsType) {

        // }
      }, 1000),
      handleBack() {
        this.$refs.roleAuthComponents.clearRoleAuth()
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    font-size: 16px;
    line-height: 40px;
    box-sizing: border-box;
    width: 100px;
    margin-bottom: 16px;
    padding: 10px 15px;
    text-align: right;
    color: #606266;
  }

  .role-auth {
    // background-color: #fff;
  }

  .menu-tree,
  .data-tree {
    min-height: 200px;
    margin: 15px;
    border: 1px solid #e0e0e0;
  }
  .auth-roles-container {
    height: calc(100% - 60px);
  }
</style>
